<template>
  <div>
    <div class="button">
      <el-button @click="dialogVisible = true;isEdit = false">添加章</el-button>
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <el-form ref="form" :model="chapterForm" label-width="80px">
              <el-form-item label="本章名称">
                <el-input v-model="chapterForm.title"></el-input>
              </el-form-item>
              <el-form-item label="权重">
                <el-input v-model="chapterForm.orderby"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false;handleSubmit()" >添 加</el-button>
          </span>
      </el-dialog>
    </div>
    <div class="chapterFrom">
       <el-table
        :data="chapterList"
        border
        style="width: 100%">
        <el-table-column
          label="序号"
          width="325"
          type="index">
        </el-table-column>
        <el-table-column
          prop="title"
          label="章名称"
          width="400">
        </el-table-column>
        <el-table-column
          prop="detail"
          label="详情"
          width="400">
          <template slot-scope="scope">
          <el-button type = "text" @click="sectionDetail(scope.row.id)">查看节</el-button>  
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="dialogVisible = true;isEdit = true;updateChapter(scope.row.id,scope.row.title,scope.row.orderby)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteChapter(scope.row.id);deleteDialogVisible = true" type="text" size="small" >删除</el-button>
          </template>
        </el-table-column>
  </el-table>
    </div>
  </div>
</template>

<script>
import request from "../utils/request"
export default {
    data() {
        return {
            dialogVisible: false,
            deleteDialogVisible:false,
            isEdit:false,
            id:0,
            title:"",
            order:"",
            chapterForm:{
                title:"",
                orderby:""
            },
            chapterList:[]
        }
    },
    methods:{
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
            this.isEdit = false
          })
          .catch(() => {});
      },
      handleClick(row) {
        console.log(row);
      },
      handleSubmit(){
        if(this.isEdit){
          request.put(`chapter/${this.id}`,{title:this.chapterForm.title,orderby:this.chapterForm.orderby,book_id:this.book_id}).then(res=>{
            if(res.data.code === 20000){
              this.getChaper()
              this.chapterForm = {...this.chapterForm,title:"",orderby:""}
              this.$message.success("修改成功")
            }else{
              this.$message.error("修改失败，请重试")
            }
          })
      }else{
         request.post(`chapter`,{title:this.chapterForm.title,orderby:this.chapterForm.orderby,book_id:this.book_id}).then((res)=>{
            if(res.data.code === 20000){
              this.getChaper()
              this.chapterForm = {...this.chapterForm,title:"",orderby:""}
              this.$message.success("添加成功")
            }else{
              this.$message.error("添加失败，请重试")
            }
          })
      }
      },
      getChaper(){
        request.get(`chapter?book_id=${this.book_id}`).then(res=>{
           if(res.data.code === 20000){
             this.chapterList = res.data.chapterList
            }else{
              this.$message.error("获取列表失败，请重试")
            }
  
        })
      },
      deleteChapter(id){
      this.$confirm('确认删除？')
          .then(() => {
            request.delete(`chapter/${id}`).then((res) => {
                if (res.data.code === 20000) {
                  this.$message.info("删除成功")
                 this.getChaper()
                }
            });
          })
          .catch(()=> {
            this.$message.info("取消删除")
          });
      },
      updateChapter(id,title,orderby){
        this.id=id
        this.chapterForm = {...this.chapterForm,title:title,orderby:orderby}
      },
       sectionDetail(id){
        this.$router.push(`section?chapter_id=${id}`)
      }
     
    },
    watch:{
      isEdit(){
        if(!this.isEdit){
          this.id = 0;
          this.title = ""
          this.orderby =""
          this.chapterForm = {...this.chapterForm,title:"",orderby:""}
        }
      }
    },
    computed:{
      book_id(){
        return this.$route.query.book_id
      }
    },
    mounted() {
      this.getChaper()
    },
}
</script>

<style lang="less" scoped>
    
</style>